<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
</body>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">
    // 创建一个自定义的类组件
    class MyComponent extends React.Component {
        // 可以在类中直接编写赋值语句，state会添加在类的实例上
        state = {
            isHot: true
        }
        render() {
            const { isHot } = this.state
            return <h2 onClick={this.changeIsHot}>今天天气很{isHot ? '炎热' : '凉爽'}</h2>
        }
        // 这里一定要使用箭头函数，因为箭头函数的this指向的是函数的调用者，所以不会有this丢失问题
        changeIsHot = () => {
            console.log(this);
            const { isHot } = this.state
            this.setState({
                isHot: !isHot
            })
        }
    }

    ReactDOM.render(<MyComponent />, document.getElementById("app"))

</script>

</html>